<template>
    <div class="outDiv" v-if="$route.fullPath.endsWith(0) || $route.fullPath === '/activity'">
        <div style="position: absolute;left: 2%;">
            <label @click="btnIndex()">
                < 返回 </label>
        </div>
        <div class="body">
            <div class="search">
                <input type="text" placeholder="请输入地点、活动名称等关键字" @keydown.enter="btnSearch()" v-model="keyword">
            </div>
            <div class="list">
                <div style="width: 100%;display: flex;margin-bottom: 10px;height: 15%; background-color: ghostwhite;
                " @click="btnDetail(item.id)" v-for="item in items">
                    <div class="listLeft">
                        <span>{{ item.vstatus }}</span>
                    </div>
                    <div class="listRight">
                        <span>{{ item.title }}</span>
                        <span style="font-size: 12px;">{{ item.vtime }}</span>
                        <span class="site">{{ item.place }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom" @click="btnMy">
            <p>我的报名</p>
        </div>
    </div>
</template>
<script setup>
// == 引入相关依赖-开始 ==
import { useRouter, useRoute } from 'vue-router'
import { onMounted, ref, watch } from 'vue'
import { url } from './router'
// == 引入相关依赖-结束 ==

// == 实例化对象-开始 ==
let router = useRouter()
let route = useRoute()
let items = ref([])
let keyword = ref('')
// == 实例化对象-结束 ==

// == 动作函数-开始 =

onMounted(() => {
    fetch(`${url}/volunteers`).then(res => {
        if (res.ok) {
            return res.json()
        }
    }).then(data => {
        items.value = data
    }).catch(err => {
        console.log(err);
    })
})


// 跳转到报名页面
function btnMy() {
    router.push('/myjoin')
}
// 跳转活动详情页面
function btnDetail(id) {
    let aId = parseInt(id)
    router.push(`/activity/detail/${aId}`)
}
// 回到首页
function btnIndex() {
    router.push('/index')
}
// 找寻活动
function btnSearch() {
    let key = keyword.value
    console.log(key);

    fetch(`http://localhost:5000/volunteer?keyword=${key}`).then(res => {
        if (res.ok) {
            return res.json()
        }
    }).then(data => {
        items.value = data
    })
}
// == 动作函数-结束 =

</script>
<style scoped>
label {
    width: 100%;
    font-size: 16px;
    color: #1b96f0;
}


.site {
    display: flex;
    justify-content: center;
    background-color: #d1e5e5;
    width: 40%;
    align-items: center;
    height: 20%;
    font-size: 12px;
    text-align: center;
    letter-spacing: 2px;
    border-radius: 10px;
}

.bottom {
    width: 100%;
    height: 5%;
    background-color: gray;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom p {
    font-family: cursive;
    color: white;
}

.list {
    width: 100%;
    height: 117%;
    overflow: auto;
    display: flex;
    background-color: pink;
    flex-direction: column;
    background-color: aliceblue;
}

.listLeft {
    width: 40%;
    height: 100%;
    background-image: url('../imgs/volunteer.png');
    background-repeat: no-repeat;
    background-size: auto;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.listLeft span {
    width: 40%;
    text-align: center;
    border-radius: 10px;
    border: 1px solid black;
    background-color: #17e3d7;
}

.listRight {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

img {
    width: 100%;
}

.outDiv {
    width: 100%;
    height: 100vh;
    background-color: color(display-p3 0.5 0.5 0.5 / 0.47);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.body {
    width: 100%;
    height: 75%;
    background-color: #fff;
}

.search {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: aliceblue;


}

.search input {
    width: 90%;
    height: 35%;
    border-radius: 10px;
    text-indent: 10px;
    border: none;
    outline: none;
    background-color: color(display-p3 0.5 0.5 0.5 / 0.47);

}

.listRight input {
    width: 110px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    text-align: center;
    outline: none;
    background-color: color(display-p3 0.5 0.5 0.5 / 0.47);

}
</style>
